<template>
  <div class="chat-container" :style="{ height: chatContainerHeight + 'px' }">
    <div class="container-users">
        <div class="searchBtn">
          <el-icon><Search /></el-icon>
        </div>
        <div class="user-avatar">
          <div class="avatar-list-item" v-for="item, index in 8">
            <el-dropdown size="small" placement="right">
              <div class="avatar-item">
                <el-avatar icon="el-icon-user-solid" />
                <div class="status"></div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>上线</el-dropdown-item>
                  <el-dropdown-item>下线</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            
          </div>
        </div>
    </div>
    <div class="container-left" id="resizableBox">
      <div class="search">
        <el-input
          v-model="input3"
          style="max-width: 600px"
          placeholder="搜索"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
      <div class="chat-list" :style="{ height: chatContainerHeight - 42 + 'px' }">
        <div class="chat-item" v-for="(user, index) in 100" :key="index" :class="{ 'act-item': user.isAct }">
          <el-avatar :size="38" :icon="UserFilled" />
          <div class="chat-info">
            <div class="chat-name">
              <div class="chat-name-text">张三</div>
              <div class="chat-name-time">2023-01-01 12:00</div>
            </div>
            <div class="chat-content">你好，最近怎么样？</div>
          </div>
        </div>
      </div>
      <div class="resize-handle" id="resizeHandle"></div>
    </div>
    <div class="container-right">
      <div class="chat-header"></div>
      <div class="chat-body" :style="{ height: chatContainerHeight - 120 + 'px' }">
        <Flex
          
          gap="middle"
          vertical
        >
          <Bubble
            placement="start"
            content="Good morning, how are you?"
            :avatar="{ icon: h(UserFilled), style: fooAvatar }"
          />
          <br/>
          <Bubble
            placement="start"
            content="What a beautiful day!"
            :styles="{ avatar: hideAvatar }"
            :avatar="{}"
          />
          <br/>

          <Bubble
            placement="end"
            content="Hi, good morning, I'm fine!"
            :avatar="{ icon: h(UserFilled), style: barAvatar }"
          />
          <br/>

          <Bubble
            placement="end"
            content="Thank you!"
            :styles="{ avatar: hideAvatar }"
            :avatar="{}"
          />
        </Flex>
      </div>
      <div class="chat-footer">
        <Sender
          v-model:value="value"
          :loading="loading"
          :auto-size="{ minRows: 2, maxRows: 6 }"
          @submit="() => {
            value = '';
            loading = true
            messageApi.info('Send message!');
          }"
          @cancel="() => {
            loading = false
            messageApi.error('Cancel sending!');
          }"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  // 消息气泡
  Bubble,
  // 发送框
  Sender,
} from 'ant-design-x-vue';
import { Search, UserFilled } from '@element-plus/icons-vue'
import useToggle from "@/hooks/useToggle";

// import { WAChatManager } from "@/chat/manager";
// import { WAChat } from "@/chat/chat";


// const manager = new WAChatManager('ws://192.168.8.4:3000/whatsapp/web/chat')
// manager.createChat(JSON.stringify(
//   {"clientId": 10010}
// ))

const [loading, _, setLoading] = useToggle();

const chatContainerHeight = ref(0)
nextTick(() => {
  const getSize = () => {
    const header = document.getElementsByClassName('navbar')[0]
    const headerHeight = header.clientHeight

    const tags = document.getElementsByClassName('tags-container')[0]
    const tagsHeight = tags.clientHeight

    const windowHeight = window.innerHeight
    chatContainerHeight.value = windowHeight - headerHeight - tagsHeight - 1
  }
  getSize()
  window.addEventListener('resize', getSize);
})

const users = ref([
  { name: '张三', avatar: '', content: '你好，最近怎么样？' },
  { name: '王五', avatar: '', content: '最近都很忙，有空吗？', isAct: true },
  { name: '王五', avatar: '', content: '最近都很忙，有空吗？' },
  { name: '赵六', avatar: '', content: '最近在忙什么？' },
])


const fooAvatar = {
  color: '#f56a00',
  backgroundColor: '#fde3cf',
};

const barAvatar = {
  color: '#fff',
  backgroundColor: '#87d068',
};

const hideAvatar = {
  visibility: 'hidden',
};

</script>

<style scoped lang="scss">
.chat-container{
  color: #000;
  width: 100%;
  display: flex;
  .container-users{
    width: 80px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 6px;
    }
            
    &::-webkit-scrollbar-track {
      background: #f9f9f9;
      border-radius: 3px;
    }
            
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }
            
    &::-webkit-scrollbar-thumb:hover {
      background: #bbb;
    }
    .user-avatar{
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      .avatar-list-item:hover {
        background-color: #e6f7ff;
      }
      .avatar-list-item{
        padding: 5px;
      }
      .avatar-item{
        position: relative;
        .status{
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #00ff00;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .searchBtn{
      font-size: 20px;
      margin: 15px 0 0 0;
      cursor: pointer;
    }
    .avatar{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #f56a00;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
  }
  .container-left{
    width: 350px;
    background-color: #f5f5f5;
    overflow: auto;
    padding: 10px 0 0 0;
    &::-webkit-scrollbar {
        width: 6px;
    }
              
    &::-webkit-scrollbar-track {
        background: #f9f9f9;
        border-radius: 3px;
    }
              
    &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
              
    &::-webkit-scrollbar-thumb:hover {
        background: #bbb;
    }
    .search{
      padding: 0 10px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .chat-list{
      overflow-y: auto;
      overflow-x: hidden;
      &::-webkit-scrollbar {
        width: 6px;
      }
                
      &::-webkit-scrollbar-track {
          background: #f9f9f9;
          border-radius: 3px;
      }
                
      &::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 3px;
      }
                
      &::-webkit-scrollbar-thumb:hover {
          background: #bbb;
      }
      .act-item{
        background-color: #e0e0e0 !important;
      }
      .chat-item:hover{
        background-color: #efefef;
      }
      .chat-item{
        width: 100%;
        display: flex;
        align-items: center;
        padding: 10px 20px;
        cursor: pointer;
        .chat-info{
          width: 80%;
          margin-left: 10px;
          .chat-content{
            color: #6C6E72;
          }
        }
        .chat-name{
          display: flex;
          justify-content: space-between;
          .chat-name-text{
            margin-right: 10px;
          }
          .chat-name-time{
            color: #999;
          }
        }
        
      }
    }
  }
  .container-right{
    width: 100%;
    background-color: #fff;
    .chat-footer{
      padding: 10px 20px;
    }
    .chat-header{
      height: 40px;
      background-color: #f5f5f5;
    }
    .chat-body{
      background-color: #fff;
      padding: 20px;
    }
  }
}

</style>
